

<template>
  <div>
    <el-input
      v-model="input"
      placeholder="请输入内容"
      style="width:200px;margin-right:20px;margin-bottom:20px"
    ></el-input>
    <el-button type="primary" icon="el-icon-search" @click="handleGet()">搜索</el-button>
    <el-button type="primary" @click="handleAdd()">
      添加门店
      <i class="el-icon-upload el-icon--right"></i>
    </el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="店名" width="100"></el-table-column>
      <el-table-column prop="method" label="法人" width="70"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
      <el-table-column prop="businessphone" label="营业执照号码" width="120"></el-table-column>
      <el-table-column prop="address" label="营业地址" width="120"></el-table-column>
      <el-table-column prop="employees" label="员工" width="180">
        <template slot-scope="cc">
          <el-popover ref="popover4" placement="right" width="500" trigger="click">
            <el-table :data="cc.row.employees">
              <el-table-column width="150" property="name" label="名字"></el-table-column>
              <el-table-column width="100" property="rank" label="职位"></el-table-column>
              <el-table-column width="150" property="phone" label="电话号码"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="bb">
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="cleckDelete(bb.row._id,cc.row._id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-popover>
          <el-button v-popover:popover4>查看</el-button>
          <el-popover ref="popover4" placement="right" width="500" trigger="click">
            <el-form :model="ruleForm" ref="ruleForm" label-width="70px" class="demo-ruleForm">
              <el-form-item label="名字" prop="name">
                <el-input v-model="ruleForm.name" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="rank">
                <el-input v-model="ruleForm.rank" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phone">
                <el-input v-model="ruleForm.phone" style="width:150px"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(cc.row._id,'ruleForm')">立即添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-popover>
          <el-button v-popover:popover4>添加</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="good" label="商品" width="180">
        <template slot-scope="cc">
          <el-popover ref="popover4" placement="right" width="500" trigger="click">
            <el-table :data="cc.row.good">
              <el-table-column width="80" property="nickname" label="昵称"></el-table-column>
              <el-table-column width="80" property="category" label="种类"></el-table-column>
              <el-table-column width="80" property="taste" label="口味"></el-table-column>
              <el-table-column width="150" property="price" label="价格(人名币)"></el-table-column>

              <el-table-column label="操作" width="100">
                <template slot-scope="bb">
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="goodDelete(bb.row._id,cc.row._id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-popover>
          <el-button v-popover:popover4>查看</el-button>
          <el-popover ref="popover7" placement="right" width="500" trigger="click">
            <el-form :model="ruleForm1" ref="ruleForm1" label-width="70px" class="demo-ruleForm">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm1.nickname" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="category">
                <el-input v-model="ruleForm1.category" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="口味" prop="taste">
                <el-input v-model="ruleForm1.taste" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="价格" prop="price">
                <el-input v-model="ruleForm1.price" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm1(cc.row._id,'ruleForm1')">立即添加</el-button>
                <el-button @click="resetForm('ruleForm1')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-popover>
          <el-button v-popover:popover7>添加</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="service" label="服务" width="180">
        <template slot-scope="cc">
          <el-popover ref="popover4" placement="right" width="500" trigger="click">
            <el-table :data="cc.row.service">
              <el-table-column width="100" property="name" label="名字"></el-table-column>
              <el-table-column width="100" property="timeconsuming" label="用时(分钟)"></el-table-column>
              <el-table-column width="150" property="price" label="价格(人名币)"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="bb">
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="serviceDelete(bb.row._id,cc.row._id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-popover>
          <el-button v-popover:popover4>查看</el-button>
          <el-popover ref="popover4" placement="right" width="500" trigger="click">
            <el-form :model="ruleForm2" ref="ruleForm2" label-width="70px" class="demo-ruleForm">
              <el-form-item label="名字" prop="name">
                <el-input v-model="ruleForm2.name" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="用时" prop="timeconsuming">
                <el-input v-model="ruleForm2.timeconsuming" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="价格" prop="price">
                <el-input v-model="ruleForm2.price" style="width:150px"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm2(cc.row._id,'ruleForm2')">立即添加</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-popover>
          <el-button v-popover:popover4>添加</el-button>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="120" prop="state">
        <template slot-scope="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开"
            inactive-text="关"
            @change="switchs(scope.row.state,scope.row._id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" prop="_id">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row._id)"></el-button>
          <el-button type="primary" icon="el-icon-delete" @click="handleDelete(scope.row._id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalData"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  async created() {
    await this.$store.dispatch("stores/fetch");
  },
  computed: {
    tableData() {
      return this.$store.state.stores.store;
    },
    totalData() {
      const total = this.$store.state.stores.total;
      const limit = this.$store.state.stores.limit;

      return Math.ceil((total / limit) * 10);
    }
  },
  data() {
    return {
      input: "",
      ruleForm: {
        name: "",
        rank: "",
        phone: ""
      },
      ruleForm1: {
        nickname: "",
        category: "",
        taste: "",
        price: ""
      },
      ruleForm2: {
        name: "",
        timeconsuming: "",
        price: ""
      },
      value4: true
    };
  },
  methods: {
    handleAdd() {
      this.$router.push({
        name: "addStore"
      });
    },
    handleEdit(_id) {
      this.$router.push({
        name: "editStore",
        params: {
          id: _id
        }
      });
    },
    handleDelete(_id) {
      this.$store.dispatch("stores/delStore", _id);
      this.$store.dispatch("stores/fetch");
    },
    handleGet() {
      this.$store.dispatch("stores/fetch", this.input);
    },
    handleCurrentChange(val) {
      this.$store.state.stores.page = val;
      this.$store.dispatch("stores/fetch");
    },
    handleOut(employees) {
      console.log(employees[0].name);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    cleckDelete(id, _id) {
      this.$store.dispatch("stores/delCleck", {
        sid: _id,
        cid: id
      });
      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    async submitForm(id) {
      await this.$store.dispatch("stores/addCleck", {
        data: this.$data.ruleForm,
        id
      });
      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    goodDelete(id, _id) {
      this.$store.dispatch("stores/delGood", {
        sid: _id,
        gid: id
      });
      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    async submitForm1(id) {
      await this.$store.dispatch("stores/addGood", {
        data: this.$data.ruleForm1,
        id
      });

      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    serviceDelete(id, _id) {
      this.$store.dispatch("stores/delService", {
        sid: _id,
        ssid: id
      });
      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    async submitForm2(id) {
      await this.$store.dispatch("stores/addService", {
        data: this.$data.ruleForm2,
        id
      });
      this.$store.dispatch("stores/fetch");
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },
    async switchs(state, id) {
      await this.$store.dispatch("stores/modifyState", {
        state,
        id
      });
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    }
  }
};
</script>

 